import React, { Component } from 'react';
import '../css/index.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import axios from  'axios'
@observer class Index extends Component {
    constructor(props) {
        super(props)
        this.state={
            message:{},
            fans:0,
            attention:0,
            creater:[],
            choose:1,
            Lookers:[],
            LookerSum:0
        }
    }
    componentWillMount(){
        Mobx.history= this.props.history
    }
    componentDidMount(){
        axios.get('http://www.niuduxiu.com/member/getmember.jhtml?id='+this.props.match.params.id)
            .then((item)=>{
                this.setState({
                    message:item.data
                })
            })
        axios.get('http://www.niuduxiu.com/pc/personPage/attentionAndFanscount.jhtml?id='+this.props.match.params.id)
            .then((item)=>{
                this.setState({
                    attention:item.data.data.attentionCount,
                    fans:item.data.data.fansCount
                })
            })
        axios.get('http://www.niuduxiu.com/creativity/getDate.jhtml?mid='+this.props.match.params.id)
            .then((item)=>{
              this.setState({
                  creater:item.data
              })
            })
        axios.get('http://www.niuduxiu.com/pc/personPage/homeBrowser.jhtml?pageNumber=1&pageSize=2000&id='+this.props.match.params.id+'&userId='+Mobx.zhanghao)
            .then((item)=>{
                this.setState({
                    Lookers:item.data.data,
                    LookerSum:item.data.browse_count
                })
            })
    }
    changeChosse(item){
        this.setState({
            choose:item
        })
    }
    toDetail(item){
        this.props.history.push('/Detail/'+item.id)
    }
    toMy(item){
        window.location.href='/Index/'+item
    }
    render() {
        if(!this.state.message.username){
            return false;
        }
        return (
            <div className="Index">
                <div className='Head'>
                    <img src={require('../img/timg.jpg')} alt="" />
                    <div className='Header'>
                        主页
                        <img src={require('../img/share.png')} />
                    </div>
                    <div className='HeaderMessage'>
                        <div>
                            <img src={this.state.message.headPic} alt=""/>
                            <p className='address'>
                                <span>{this.state.message.area.name}</span> <i>|</i> <span>{this.state.message.username}</span>
                            </p>
                            <p className='guanZhu'>
                                <span>关注 {this.state.attention}</span>
                                <span>粉丝 {this.state.fans}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <ul className='ChooseTitle'>
                    <li style={{color:this.state.choose===1?'#ffc408':'#333'}}  onClick={this.changeChosse.bind(this,1)}>创意数</li>
                    <li style={{color:this.state.choose===2?'#ffc408':'#333'}} onClick={this.changeChosse.bind(this,2)}>浏览者</li>
                </ul>
                <div className='CreateAll' style={{display:this.state.choose===1?'block':'none'}}>
                    {
                        this.state.creater.map((item,index)=>{
                            return(
                                <div key={index}>
                                    <p className='time'>{item.date}</p>
                                    {
                                        item.clist.map((item1,index1)=>{
                                            return(
                                                <div className='CreateOne' key={index1} onClick={this.toDetail.bind(this,item1)}>
                                                    <div>
                                                        <div className='Img'>
                                                            <img src={item1.indexImage} alt=""/>
                                                        </div>
                                                        <p className='title shengluehao'>{item1.titleName}</p>
                                                        <p className='caozuo'>
                                                            <span>
                                                                <img src={require('../img/zan.png')} alt=""/>
                                                                <span>{item1.browseCount}</span>
                                                            </span>
                                                            <span>
                                                                <img src={require('../img/zan.png')} alt=""/>
                                                                <span>{item1.likeCount}</span>
                                                            </span>
                                                        </p>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            )
                        })
                    }
                </div>
                <div style={{display:this.state.choose===2?'block':'none'}} className='Look'>
                    {
                        this.state.Lookers.map((item,index)=>{
                            return(
                                <div className="LookOne" key={index}>
                                    <img src={item.head_pic} alt="" onClick={this.toMy.bind(this,item.user_id)} />
                                    <p className='shengluehao'>{item.username}</p>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Index;
